<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>设备表</title>
		<script type="text/javascript" src="../js/echarts.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/vue-resource.js"></script>
		<!--<script type="text/javascript" src="../js/vue.min.js"></script>-->
		<!--<script type="text/javascript" src="../laydate/laydate.js"></script>-->
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/my/table.css" />
	</head>

	<body>
		<div id="vue_one" class="div_table layui-form">
			<button class="layui-btn" v-on:click="add">新增</button>
			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>设备id</th>
						<th>房间</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(dev, index) in device" v-if="dev.Addressid == '' && dev.Workshop == ''">
						<td width="200">
							<input type="number" name="" value="" v-model="dev.equipmentAddressid" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input deviceId">
						</td>
						<td width="">
							<select id="eq_homeId" lay-verify="required">
								<option v-for="(h, index) in home" :value="index">{{h.homeName}}</option>
							</select>
						</td>
						<td >
							默认启用
						</td>
						<td class="tableButton">
							<!--<button class="layui-btn updateTable">修改</button>-->
							<button class="layui-btn " v-on:click="addEquipment(index)">新增</button>
							<button class="layui-btn deleteTable" v-on:click="deleteDev(index)">删除</button>
						</td>
					</tr>
					<tr v-for="(dev, index) in device" ref="device" v-if="dev.Addressid != '' && dev.Workshop != ''">
						<td width="200">
							<input type="number" name="" value="" v-model="dev.equipmentAddressid" readonly="readonly" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input deviceId">
						</td>
						<td>
							<select class="update_eq_homeId"  v-model="dev.homeId" lay-verify="required" disabled="disabled">
								<option v-for="(h, index) in homeselect"  name="h.homeId"  :value="h.homeId" >{{h.homeName}}</option>
							<!--	<option v-for="(h, index) in home" v-if="dev.homeId!=h.homeId" :value="index">{{h.homeName}}:{{h.homeId}}</option>-->
							</select>
						</td>
						<td v-if="dev.state==1">
							启用
						</td>
						<td v-if="dev.state!=1">
							失效
						</td>
						<td class="tableButton">
							<button class="layui-btn updateTable">修改</button>
							<button class="layui-btn keepTable" v-on:click="updateEquipment(index)">保存</button>
							<button class="layui-btn" v-on:click="updateEquipmentState(index)">修改状态</button>
							<button class="layui-btn deleteTable" v-on:click="removeEquipment(index)">删除</button>
						</td>
					</tr>

					<!--<tr>
						<td>
							<input type="text" name="" value="" readonly="readonly" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
						</td>
						<td>
							<select name="" lay-verify="required" disabled="disabled">
								<option value=""></option>
								<option value="0">北京</option>
								<option value="1">上海</option>
								<option value="2">广州</option>
								<option value="3">深圳</option>
								<option value="4">杭州</option>
							</select>
						</td>
						<td class="tableButton">
							<button class="layui-btn updateTable">修改</button>
							<button class="layui-btn keepTable">保存</button>
							<button class="layui-btn deleteTable">删除</button>
						</td>
					</tr>-->
				</tbody>
			</table>

		</div>

	</body>
	<script>
		var v = new Vue({
			el: '#vue_one',
			data: {
				deviceAdd: {
					Addressid: "",
					Workshop: ""
				},
				device: [],
				homeselect: {},
				home: {},
				layui: {},
				couponSelected: 0,
				HomeUpdateId:0
			},
			created() {　　　　　　　　　　},
			mounted: function() {

			},
			methods: {
				add: function() {
					this.device.unshift(this.deviceAdd);
					this.$nextTick(() => {
						// 这里写jquery代码
						$(function() {
							XR();
						})

					})
				},
				deleteDev: function(index) {
					this.device.splice(index, 1);
					this.$nextTick(() => {
						// 这里写jquery代码
						$(function() {
							XR();
						})

					})
				},
				updateAndKeepJquery: function() {
					$(".updateTable").on("click", function() {
						$(this).parent().prevAll().find("input").attr("readonly", false);
						$(this).parent().prev().find("select").attr("disabled", false);
						$(this).parent().prevAll().find("input").css("border", "1px solid #ddd");
						$(this).css("display", "none");
						$(this).next(".keepTable").css("display", "block");
						XR();
					});
					$(".keepTable").on("click", function() {
						$(this).parent().prevAll().find("input").attr("readonly", true);
						$(this).parent().prevAll().find("select").attr("disabled", true);
						$(this).parent().prevAll().find("input").css("border", "0px");
						var room = $(this).parent().prevAll().find(".deviceId").val();
						var homeId = $("tbody tr").eq(2).children().find(".update_eq_homeId").val();//$(this).parent().prev().find(".update_eq_homeId").val();
						console.log(homeId + "/homeId" );
						v.HomeUpdateId = homeId;
						//var deviceId = $(this).parent().prevAll().find(".room").val();
						console.log(room + "/" );
						$(this).css("display", "none");
						$(this).prev(".updateTable").css("display", "block");
						XR();
					});
				},

				getEquipment: function() {
					//发送get请求
					console.log("请求设备信息")
					this.$http.get('http://localhost:8080/equipmentController/getByEquipment').then(function(res) {
						//console.log(res.body);
						v.device = res.body;
						this.$nextTick(() => {
							// 这里写jquery代码
							$(function() {
								v.updateAndKeepJquery();
								XR();
							})

						})
						console.log(v.device);
					}, function() {
						console.log('请求失败处理');
					});
					console.log("请求房间信息")
					this.$http.get('http://localhost:8080/home/getAllHomes').then(function(res) {
						//console.log(res.body);
						v.home = res.body;
						v.homeselect = res.body;
						this.$nextTick(() => {
							// 这里写jquery代码
							$(function() {
								XR();
							})

						})
						console.log(v.home);
					}, function() {
						console.log('请求失败处理');
					});
				},
				addEquipment: function(index) {
					console.log("插入设备信息")
					var homeIndex = $("#eq_homeId").val();
					if(v.device[index].equipmentAddressid != null && v.device[index].equipmentAddressid != "") {
						console.log("homeIndex:" + homeIndex + v.home[homeIndex].homeName)
						this.$http.post('http://localhost:8080/equipmentController/addEquipment', {
							equipmentAddressid: v.device[index].equipmentAddressid,
							equipmentWorkshop: v.home[homeIndex].homeName,
							homeId: v.home[homeIndex].homeId
						}, {
							emulateJSON: true
						}).then(function(res) {
							console.log(res.body);
							if(res.body == 1) {
								v.getEquipment();
								v.deviceAdd = {
									Addressid: "",
									Workshop: ""
								};
								layer.alert('ok', {
									icon: 1
								});
							} else {
								layer.alert('no', {
									icon: 5
								});
							}
						}, function(res) {
							console.log(res.status);
						});
					} else {
						layer.alert('设备id不能为空', {
							icon: 5
						});
					}
				},
				removeEquipment: function(index) {
					console.log("移除设备信息")
					this.$http.post('http://localhost:8080/equipmentController/removeEquipment', {
						equipmentId: v.device[index].equipmentId
					}, {
						emulateJSON: true
					}).then(function(res) {
						console.log(res.body);
						if(res.body == 1) {
							v.deleteDev(index);
							v.getEquipment();
							layer.alert('ok', {
								icon: 1
							});
						} else {
							layer.alert('no', {
								icon: 5
							});
						}
					}, function(res) {
						console.log(res.status);
					});
				},
				updateEquipment: function(index) {
					console.log("修改设备信息")
					//var homeIndex = $("#update_eq_homeId option:selected").val();
					console.log("index:" + index)
					var testhomeid = $("tbody tr").eq(index).children().find(".update_eq_homeId").val();
					console.log("testhomeid:"+testhomeid)
					var homeId = testhomeid;
					var homeIndex = 0;
					for(var i=0;i<v.home.length;i++){
						if(v.home[i].homeId == homeId){
							console.log("确定index成功")
							homeIndex = i;
						}
					}
					console.log("homeId:" + homeId)
					this.$http.post('http://localhost:8080/equipmentController/updateEquipment', {
						equipmentId: v.device[index].equipmentId,
						equipmentAddressid: v.device[index].equipmentAddressid,
						equipmentWorkshop: v.home[homeIndex].homeName,
						homeId: homeId
					}, {
						emulateJSON: true
					}).then(function(res) {
						v.HomeUpdateId=0;
						v.getEquipment();
						console.log(res.body);
						if(res.body == 1) {
							layer.alert('ok', {
								icon: 1
							});
							
						} else {
							layer.alert('no', {
								icon: 5
							});
						}
					}, function(res) {
						console.log(res.status);
					});
				},
				updateEquipmentState: function(index) {
					this.$http.post('http://localhost:8080/equipmentController/editState', {
						equipmentId: v.device[index].equipmentId,
						state: v.device[index].state
					}, {
						emulateJSON: true
					}).then(function(res) {
						console.log(res.body);
						v.getEquipment();					
						if(res.body == 1) {
							layer.alert('ok', {
								icon: 1
							});
							
						} else {
							layer.alert('no', {
								icon: 5
							});
						}
					}, function(res) {
						console.log(res.status);
					});
				}
			}
		})

		$(document).ready(function() {
			XR();
			readyOnlyTrue();
			readyOnlyFalse();
			v.getEquipment();
		});

		function readyOnlyTrue() {
			/*修改,取消只读*/
			$(".updateTable").on("click", function() {
				$(this).parent().prevAll().find("input").attr("readonly", false);
				$(this).parent().prevAll().find("input").css("border", "1px solid #ddd");
				$(this).css("display", "none");
				$(this).next(".keepTable").css("display", "block");
			});
		}

		function readyOnlyFalse() {
			/*保存,只读*/
			$(".keepTable").on("click", function() {
				$(this).parent().prevAll().find("input").attr("readonly", true);
				$(this).parent().prevAll().find("input").css("border", "0px");
				var room = $(this).parent().prevAll().find(".deviceId").val();
				var deviceId = $(this).parent().prevAll().find(".room").val();
				console.log(room + "/" + deviceId);
				$(this).css("display", "none");
				$(this).prev(".updateTable").css("display", "block");
			});
		}

		function con() {
			console.log("test");
		}

		function XR() {
			//渲染form
			layui.use('form', function() {
				var form = layui.form;
				form.render();
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
			layui.use('element', function() {
				var element = layui.element;

				//一些事件监听
				element.on('tab(demo)', function(data) {
					console.log(data);
				});
			});
		}
	</script>

</html>